<template>
  <div class="path-index container">
    <Header></Header>
    <section>
      <ul v-if='list.length'>
        <!-- 判断数据有无 -->
        <li
          @click='goList(item)'
          v-for='(item,index) in list'
          :key='index'
        >
          <div>
            <span>{{item.name}}</span>
            <span>{{item.tel}}</span>
          </div>
          <div class='city'>
            <span
              class='active'
              v-if='item.isDefault == 1'
            >[默认]</span>
            <span v-else></span>
            <span>{{item.province}}</span>
            <span>{{item.city}}</span>
            <span>{{item.county}}</span>
            <span>{{item.addressDetail}}</span>
          </div>
        </li>
      </ul>
      <h1 v-else>暂无数据，请添加地址</h1>
      <div
        class='add-path'
        @click='goList("add")'
      >点击这里,添加您的地址</div>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Header from "../../components/path/Header.vue";
import Tabbar from "../../components/common/Tabbar.vue";
import { mapState, mapMutations } from "vuex";
import http from "@/common/api/request.js";
import bus from "../../common/bus.js";
export default {
  data() {
    return {
      //为了服务判断是不是从结算页面进来的而设置
      pathStatus: false,
    };
  },
  components: {
    Header,
    Tabbar,
  },
  created() {
    //creat 一进来就马上执行了
    //从订单页面进来的
    if (this.$route.query.type == "select") {
      this.pathStatus = true;
    }
    this.getData();
  },
  computed: {
    ...mapState({
      list: (state) => state.path.list,
    }),
  },
  methods: {
    ...mapMutations(["initData"]),
    getData() {
      http
        .$axios({
          url: "/api/selectAddress",
          method: "post",
          headers: {
            token: true,
          },
        })
        .then((res) => {
          this.initData(res.data);
        });
    },
    goList(options) {
      //this.pathStatus为true代表从订单页面进入的：选择状态
      if (this.pathStatus) {
        //赋值，传值 bus
        bus.$emit("selectPath", JSON.stringify(options));
        this.$router.back(); //返回上一层？
        //用this.$router.back()也可以进行传值
        return;
        /* 传值用 $router.go 传 也可以用 psuh*/
      }

      /*       
      console.log(options);
      //通过第八行的方法获得对象;
      console.log(JSON.stringify(options));
      //比较两个传参方式的区别; 
      */
      this.$router.push({
        //了解push和replace的区别！！
        name: "path-list",
        //隐式的形式传过去
        params: {
          //key: options, //在create部分接收
          key: JSON.stringify(options),
          //通过json传参和通过对象传参的区别
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .tabbar {
  //穿透tarbar
  border-top: 2px solid #ccc;
}
section {
  display: flex;
  flex-direction: column; //实现 添加地址居中方法
  align-items: center;
  background-color: #f7f7f7;
  ul {
    justify-content: center;
    width: 98vw;
    li {
      border: #b0352f 1px solid;
      padding: 0.266666rem 0.4rem;
      margin: 0.16rem 0;
      background-color: #ffffff;
      span {
        padding-right: 0.4rem;
        font-size: 0.426666rem;
        font-weight: 600;
      }
      /*       span:last-child:hover {
        background: yellow;
      } */
      .active {
        //padding-left: 0.1333rem;
        color: #b0352f;
        font-weight: 800;
      }
      .city {
        span {
          padding-right: 0.16rem;
        }
      }
    }
    li:hover {
      font-size: 103.78888%;
    }
    /*     li.span:hover {
      font-weight: 200;   //字体粗细不生效
    } */
  }
  .add-path {
    //这里没有高 全靠元素撑
    margin-top: 0.8rem;
    width: 6.2rem;
    line-height: 1.066666rem;
    font-size: 0.48rem;
    text-align: center;
    color: #ffffff;
    background-color: #b0352f;
    border-radius: 6px;
  }
}
</style>